<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./element/index.css"/>
  <link rel="stylesheet" href="./swiper/idangerous.swiper.css"/>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <!-- less -->
  <link rel="stylesheet/less" type="text/css" href="./less/test.less" />
  <script src="./less/less.min.js" ></script>
</head>

<body>
  hello world
  <div id="app">
    {{msg}}
    <el-button @click="msg='poi'">123</el-button>
    {{count}}
    <el-button @click="changeCount">++</el-button>
    <div class="jqt">
      jquery-test
    </div>
    <div>
      <button type="button" class="layui-btn poi" @click="layuiTest">
         layui<i class="layui-icon layui-icon-tree layui-font-12"></i>
      </button>
    </div>
    <div class="layui-carousel" id="test1">
      <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
      </div>
    </div>
    <div id="lessTest">
      <div class="poi">
        less-test
      </div>
    </div>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <a href="" target="_blank">
          <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="">
        </a>
      </el-carousel-item>
    </el-carousel>
    <div style="height: 500px;">
      
    </div>
    <!-- 单选按钮 -->
    <span v-for="(item,index) in jeList" :key="index" class="jeItem" :class="{selected:item.selected}" @click="selectItem(item)">
      {{item.name}}
    </span>
  </div>
</body>
<script src="./vue/vue.min.js"></script>
<script src="./element/index.js"></script>
<script src="./jquery/jquery-1.9.1.min.js"></script>
<script src="./layui/layui.js"></script>
<!-- <script>ELEMENT.locale(ELEMENT.lang.en)</script> --> <!-- element英文化 -->
<script src="./js/browser.min.js"></script><!-- ie兼容 -->
<script type="text/babel">
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'hello vue',
      count: 0,
      jeList:[
        {name:'1000万以下',selected:false},
        {name:'1000万-5000万',selected:false},
        {name:'5000万-1亿',selected:false},
        {name:'1亿以上',selected:false},
      ]
    },
    methods: {
      selectItem(item){
        console.log(item)
        if(!item.selected){
          this.jeList.map(item=>{
            item.selected=false
          })
          item.selected=true
        }
      },
      change: function () {
        this.msg = 'element'
      },
      changeCount: function () {
        this.match()
      },
      match: function () {
        this.count++
        if(this.count%2==0){
          this.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
        }else{
          this.$message.success('成功2')
        }
      },
      layuiTest:function(){
        layer.msg('hello');
      }
    },
    mounted: function () {
      //页面滚动时
      // window.onscroll = function() {
      //   //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //   //scrollTop就是触发滚轮事件时滚轮的高度
      //   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //   console.log("滚动距离" + scrollTop);
      // }
      // $(window).scroll(function() {
      //   //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //   //scrollTop就是触发滚轮事件时滚轮的高度
      //   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //   console.log("滚动距离" + scrollTop);
      // })
    }
  })
  
</script>

<!-- 轮播图 -->
<script>
  layui.use('carousel', function(){
    //建造实例
    layui.carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always' //始终显示箭头
      //,anim: 'updown' //切换动画方式
    });
  });
</script>

<!-- jquery -->
<script>
  $(document).ready(function(){
    $(".jqt").click(function(){
      $(this).hide();
    });
  });
</script>


<style>
  .selected{
    background: #4389ff;
    color: #fff;
    height: 22px;
    margin-right: 15px;
    border-radius: 2px;
    /* color: #666; */
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    /* padding: 6px 6px 6px 6px; */
    padding: 6px;
  }
  .jeItem{
    cursor: pointer;
    margin-right: 6px;
    padding: 6px;
  }
</style>

</html>